<template>
    <div class="toolbar">
        <el-button type="primary" class="toolbar-btn" @click="BeginAdd()">添加</el-button>
        <el-button type="danger" class="toolbar-btn" @click="DelMoreway()">批量删除</el-button>
        <el-button type="primary" class="toolbar-btn" @click="OpenOut = true">导出</el-button>
        <el-button type="primary" class="toolbar-btn" @click="FindData.IsOpenFind = true">打开查询</el-button>
        <el-button type="primary" class="toolbar-btn" @click="FindData.IsOpenFind = false">关闭查询</el-button>
        <!-- 数据显示 -->
        <el-button type="primary" class="toolbar-btn" @click="GetGoods()">输入完成开始查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="GoodsName" label="商品名称" width="100">
            <template #header>

                <div>产品名称</div>
                <el-input v-model="FindData.GoodsName" placeholder="请输入商品名称" size="small" clearable
                    v-if="FindData.IsOpenFind" class="filter-input" />
            </template>
        </el-table-column>
        <el-table-column prop="Order" label="生产批次" width="120">
            <template #header>
                <div class="filter-header">
                    <div>生产批次</div>
                    <el-input v-model="FindData.Order" placeholder="请输入生产批次" size="small" clearable
                        v-if="FindData.IsOpenFind" class="filter-input" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="Expired" label="保质期(天)" width="120">
            <template #header>
                <div class="filter-header">
                    <div>保质期(天)</div>
                    <el-input v-model="FindData.Expired" placeholder="请输入保质期" size="small" clearable
                        v-if="FindData.IsOpenFind" class="filter-input" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="Allownum" label="生产许可证号" width="220">
            <template #header>
                <div class="filter-header">
                    <div>生产许可证号</div>
                    <el-input v-model="FindData.Allownum" placeholder="请输入生产许可证号" size="small" clearable
                        v-if="FindData.IsOpenFind" class="filter-input" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="Companyname" label="生产企业" width="120">
            <template #header>
                <div class="filter-header">
                    <div>生产企业</div>
                    <el-input v-model="FindData.Companyname" placeholder="请输入生产企业" size="small" clearable
                        v-if="FindData.IsOpenFind" class="filter-input" />
                </div>
            </template>
        </el-table-column>

        <!-- <el-table-column prop="Cover" label="封面" width="120" />
      <el-table-column prop="Check" label="检查报告" width="120" /> -->

        <el-table-column prop="Finiststate" label="完成状态" width="120" />
        <el-table-column prop="Creator" label="创建人" width="120" />
        <el-table-column prop="Createtime" label="创建时间" width="120">
            <template v-slot="scoped">
                {{ moment(scoped.row.Createtime).format("yyyy-MM-DD") }}
            </template>
        </el-table-column>
        <el-table-column prop="Modifier" label="修改人" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template v-slot="scoped">
                <el-button type="danger" size="small" class="table-btn" @click="GoodsDel(scoped.row)">删除</el-button>
                <el-button type="primary" size="small" class="table-btn"
                    @click="BeginUpdateway(scoped.row)">编辑</el-button>
                <el-button type="primary" size="small" class="table-btn" @click="Descway(scoped.row)">详情</el-button>
                <el-button type="primary" size="small" class="table-btn"
                    @click="GetQRcode(scoped.row)">导出溯源码</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
        <el-pagination v-model:current-page="Pages.pageindex" v-model:page-size="Pages.pagesize"
            :page-sizes="[2, 4, 6, 8]" :size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="Pages.totalcount" :prev-text="'上一页'" :next-text="'下一页'" />
    </div>

    <!-- 添加 -->
    <el-dialog v-model="OpenAddway" title="商品添加" width="1000" center>
        <!-- {{ GoodsDate }} -->
        <el-form ref="ruleFormRef" style="max-width: 1000px" :model="GoodsDate" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <!-- 第一行：三个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="8">
                    <el-form-item label="商品名称" prop="GoodsName">
                        <el-select v-model="GoodsDate.GoodsName" placeholder="请选择商品名称" style="width: 240px">
                            <el-option label="麻辣兔头" value="麻辣兔头" />
                            <el-option label="悔蛊" value="悔蛊" />
                            <el-option label="至尊仙胎" value="至尊仙胎" />
                            <el-option label="春秋蝉" value="春秋蝉" />
                            <el-option label="偷生" value="偷生" />
                            <el-option label="鸿运齐天" value="鸿运齐天" />
                            <el-option label="智慧" value="智慧" />
                            <el-option label="寿" value="寿" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产企业" prop="Companyname">
                        <el-input v-model="GoodsDate.Companyname" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保质期(天)" prop="Expired">
                        <el-input-number v-model="GoodsDate.Expired" />

                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第二行：两个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="10">
                    <el-form-item label="生产许可证号" prop="Allownum">
                        <el-input v-model="GoodsDate.Allownum" style="width: 800px;" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="批次" prop="Order">
                        <el-input v-model="GoodsDate.Order" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第三行：两个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="8">
                    <el-form-item label="封面" prop="Cover">
                        <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                            :show-file-list="false" :on-success="CoverUpload" :before-upload="FileCheck">
                            <img v-if="GoodsDate.Cover" :src="GoodsDate.Cover" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="质检报告" prop="Check">
                        <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                            :show-file-list="false" :on-success="CheckUpload" :before-upload="FileCheck">
                            <img v-if="GoodsDate.Check" :src="GoodsDate.Check" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第四行：三个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="7">
                    <el-form-item label="养殖方式" prop="Breedid">
                        <el-select v-model="GoodsDate.Breedid" placeholder="请选择养殖方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="屠宰方式" prop="Killid" aria-disabled="true">
                        <el-select v-model="GoodsDate.Killid" placeholder="请选择屠宰方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="深加工方式" prop="Deepprocessid">
                        <el-select v-model="GoodsDate.Deepprocessid" placeholder="请选择深加工方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="AddGoodsWay(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetAddForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="OpenUpdate" title="商品编辑" width="1000" center>
        <!-- {{ GoodsDate }} -->
        <el-form ref="ruleFormRef" style="max-width: 1000px" :model="GoodsDate" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <!-- 第一行：三个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="8">
                    <el-form-item label="商品名称" prop="GoodsName">
                        <el-select v-model="GoodsDate.GoodsName" placeholder="请选择商品名称" style="width: 240px">
                            <el-option label="麻辣兔头" value="麻辣兔头" />
                            <el-option label="悔蛊" value="悔蛊" />
                            <el-option label="至尊仙胎" value="至尊仙胎" />
                            <el-option label="春秋蝉" value="春秋蝉" />
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产企业" prop="Companyname">
                        <el-input v-model="GoodsDate.Companyname" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="保质期(天)" prop="Expired">
                        <el-input-number v-model="GoodsDate.Expired" :min="15" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第二行：两个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="10">
                    <el-form-item label="生产许可证号" prop="Allownum">
                        <el-input v-model="GoodsDate.Allownum" style="width: 800px;" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="批次" prop="Order">
                        <el-input v-model="GoodsDate.Order" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第三行：两个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="8">
                    <el-form-item label="封面" prop="Cover">
                        <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                            :show-file-list="false" :on-success="CoverUpload" :before-upload="FileCheck">
                            <img v-if="GoodsDate.Cover" :src="GoodsDate.Cover" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="质检报告" prop="Check">
                        <el-upload class="avatar-uploader" action="http://localhost:5017/api/Goods/Upload"
                            :show-file-list="false" :on-success="CheckUpload" :before-upload="FileCheck">
                            <img v-if="GoodsDate.Check" :src="GoodsDate.Check" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第四行：三个字段并排 -->
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="7">
                    <el-form-item label="养殖方式" prop="Breedid">
                        <el-select v-model="GoodsDate.Breedid" placeholder="请选择养殖方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="屠宰方式" prop="Killid" aria-disabled="true">
                        <el-select v-model="GoodsDate.Killid" placeholder="请选择屠宰方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="深加工方式" prop="Deepprocessid">
                        <el-select v-model="GoodsDate.Deepprocessid" placeholder="请选择深加工方式" style="width: 240px">
                            <el-option label="第一种" value="1" />
                            <el-option label="第二种" value="2" />
                            <el-option label="第三种" value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="Updateway(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="StepUpdateway(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 导出 -->
    <el-dialog v-model="OpenOut" title="商品导出" width="300" center>
        <!-- {{ numbers }} -->
        <el-form ref="ruleFormRef" style="max-width: 1000px" :model="GoodsDate" status-icon :rules="rules">
            <el-form-item>
                <el-input-number v-model="numbers" :min="1" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="BeginOut">
                    导出
                </el-button>
                <el-button @click="OpenOut = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { dayjs, ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import type { ComponentSize } from 'element-plus'
import axios from 'axios';
import moment from 'moment';  //日期格式
const size = ref<ComponentSize>('default')
const FindData = reactive({  //查询参数
    GoodsName: "", //商品名称
    Order: "",  //生产批次
    Expired: null,  //保质期
    Allownum: "",  //生产许可证号
    Companyname: "",  //生产企业
    IsOpenFind: false
})
const Pages = reactive({   //分页参数
    pageindex: 1,  //当前页
    pagesize: 4,  //当前页容量
    totalcount: 0  //数据总条数
})
const tableData = ref([])  //显示参数
onMounted(() => {   //加载函数钩子
    GetGoods();
})
//#region  商品显示部分

//获取商品数据
const GetGoods = () => {
    axios.get("/api/Goods/GoodsGet", {
        params: {
            pageindex: Pages.pageindex,
            pagesize: Pages.pagesize,
            GoodsName: FindData.GoodsName,  //商品名称
            Order: FindData.Order,  //生产批次
            Expired: FindData.Expired,  //保质期
            Allownum: FindData.Allownum,  //生产许可证号
            Companyname: FindData.Companyname //生产企业
        }
    }).then(res => {
        tableData.value = res.data.PageData;
        Pages.totalcount = res.data.Totalcount
    })
}
//侦听器
watch(Pages, () => {
    GetGoods();
})
//#endregion


//#region  商品删除
// 处理退出登录
//单删
const GoodsDel = (row: any) => {
    ElMessageBox.confirm(
        '确定要删除商品信息吗吗？',
        '删除商品',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        axios.put("/api/Goods/GoodsDel", {
            Id: row.Id
        }).then(res => {
            ElMessage.success(res.data.Message);
            GetGoods();
        }).catch(res => {
            ElMessage.error(res.data.Message);
        });

    })
        .catch(() => {
            ElMessage.success("取消删除");
        });
};
//#endregion


//#region  商品新增部分
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
axios.defaults.baseURL = "http://localhost:5017"
const pinia = useCounterStore();
const ruleFormRef = ref<FormInstance>()
const OpenAddway = ref(false);

const GoodsDate = reactive({  //单个商品参数
    "Id": null,
    "GoodsName": "",
    "Order": dayjs().format("YYYYMMDD").toString(),
    "Expired": null,
    "Allownum": "",
    "Companyname": "",
    "Cover": "",
    "Check": "",
    "Finiststate": "",
    "Creator": pinia.UserInfo.RealName,
    "Createtime": dayjs().format("YYYY-MM-DD"), //本地当前时间
    "Modifier": "",
    "Breedid": null,
    "Killid": null,
    "Deepprocessid": null
})

const rules = reactive<FormRules<typeof GoodsDate>>({  //校验
    GoodsName: [
        { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
})
//过滤图片文件
const FileCheck: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/gif' &&
        rawFile.type !== 'image/png' &&
        rawFile.type !== 'image/avif') {
        ElMessage.error('文件格式不正确!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件不能超过 2MB!')
        return false
    }
    return true
}

const CoverUpload: UploadProps['onSuccess'] = (Urlway: any) => {  //封面上传
    GoodsDate.Cover = Urlway;
}

const CheckUpload: UploadProps['onSuccess'] = (Urlway: any) => {  //检查图片上传
    GoodsDate.Check = Urlway;
}

const BeginAdd = () => {  //打开添加对话框
    OpenAddway.value = true;
    var Allow = "SC";
    var i: any = ref(0)
    for (i = 0; i < 12; i++) {
        Allow += Math.ceil(Math.random() * 10).toString();
    }
    Object.assign(GoodsDate, {  //单个商品参数
        "Id": null,
        "GoodsName": "",
        "Order": dayjs().format("YYYYMMDD").toString(),
        "Expired": null,
        "Allownum": Allow,
        "Companyname": "",
        "Cover": "",
        "Check": "",
        "Finiststate": "",
        "Creator": pinia.UserInfo.RealName,
        "Createtime": dayjs().format("YYYY-MM-DD"), //本地当前时间
        "Modifier": "",
        "Breedid": null,
        "Killid": null,
        "Deepprocessid": null
    })

}
const AddGoodsWay = (formEl: FormInstance | undefined) => { //商品添加

    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.post("/api/Goods/AddGoods", GoodsDate).then(res => {
                if (res.data.Num == 200) {
                    ElMessage.success(res.data.Message);
                    OpenAddway.value = false; //关闭对话框
                    GetGoods();//刷新页面
                } else {
                    ElMessage.error(res.data.Message);
                }
            })
        } else {
            console.log('error submit!')
        }
    })
}
//取消添加
const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    OpenAddway.value = false;
}

//#endregion


//#region 商品编辑
const OpenUpdate = ref(false)
//反填
const BeginUpdateway = (row: any) => {
    OpenUpdate.value = true;  //打开对话框
    Object.assign(GoodsDate, row); //反填
    GoodsDate.Breedid = row.Breedid.toString();
    GoodsDate.Killid = row.Killid.toString();
    GoodsDate.Deepprocessid = row.Deepprocessid.toString();
    GoodsDate.Modifier = pinia.UserInfo.RealName;
}
//修改
const Updateway = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.put("/api/Goods/GoodsUpdate", GoodsDate).then(res => {
                if (res.data.Num == 200) {
                    ElMessage.success(res.data.Message);
                    OpenUpdate.value = false; //关闭对话框
                    GetGoods();//刷新页面
                } else {
                    ElMessage.error(res.data.Message);
                }
            })
        } else {
            console.log('error submit!')
        }
    })
}
const StepUpdateway = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    OpenUpdate.value = false;
}
//#endregion


//#region 开始导出
const OpenOut = ref(false);
const numbers = ref(0);
//按照数量导出
const BeginOut = () => {
    location.href = "http://localhost:5017/api/Goods/Outway?number=" + numbers.value
}
//#endregion

//#region 批量删除
const ids = ref('')
// 定义商品数据接口
interface GoodsItem {
    Id: string | number;
    [key: string]: any;
}

const handleSelectionChange = (val: GoodsItem[]) => { //获取选中的数据主键
    if (val.length > 0) {
        ids.value = val.map(item => item.Id).join()//获取所有选中行的id组成的字符串，以逗号分隔;
        console.log(ids.value);

        ElMessage.success(ids.value)
    }
}
//删除方法:
const DelMoreway = () => {
    ElMessageBox.confirm(
        '确定要批量删除商品信息吗吗？',
        '批量删除商品',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        axios.put("/api/Goods/GoodsMoreDel", { Ids: ids.value }).then(res => {
            ElMessage.success(res.data.Message);
            GetGoods();
        }).catch(res => {
            ElMessage.error(res.data.Message);
        });

    })
        .catch(() => {
            ElMessage.success("批量取消删除");
        });
}
//#endregion

//#region  溯源码
const GetQRcode = (row: any) => {
    router.push("QRcode");
    localStorage.setItem("Companyname", row.Companyname)  //产地
    localStorage.setItem("Creator", row.Creator)  //生产商
    localStorage.setItem("Createtime", row.Createtime)  //生产日期
}
//#endregion

//#region 商品详情
const Descway = (row: any) => {
    localStorage.setItem("GoodsId", row.Id)
    localStorage.setItem("GoodsId", row.Id)
    
    router.push("/Traceability") //溯源页面
}
//#endregion
</script>
<style scoped>
.filter-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.filter-header>div {
    font-weight: bold;
    margin-bottom: 4px;
}

.filter-input {
    width: 100%;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    text-align: center;
}

.avatar-uploader .el-upload img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    /* 保持比例并填充，避免变形 */
    border-radius: 6px;
    /* 和边框一致圆角 */
}

/* 工具栏样式 */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-btn {
    transition: all 0.3s ease;
}

.toolbar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 表格操作按钮样式 */
.table-btn {
    margin-right: 8px;
    transition: all 0.2s ease;
}

.table-btn:hover {
    transform: scale(1.05);
}

/* 分页组件样式 */
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    background-color: #f5f7fa;
    border-radius: 8px;
}

/* 对话框内按钮样式 */
.el-dialog__footer .el-button {
    margin-left: 10px;
    transition: all 0.3s ease;
}

.el-dialog__footer .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-btn {
        width: 100%;
    }

    .pagination-container {
        justify-content: center;
    }
}
</style>